<style lang="scss" scoped>
  .indoor-index {
    height: 100vh;
    display: flex;
    flex-direction: column;
    .section {
      height: 100%;
      overflow-y: auto;
      .indoor-case {
        padding: 1vw;
      }
    }
    .footer {
      padding: 1.5vw;
      font-size: 3vw;
      display: flex;
      input {
        width: 100%;
        padding: .2vw 2vw;
        margin-right: 2vw;
      }
      button {
        width: 15vw;
        background: #000bfa;
      }
    }
  }
</style>

<template lang="pug">
  .indoor-index
    head-text(:name="room.name" :number="room.users")
    section.section(ref="section")
      .indoor-case(ref="indoor")
        information(v-for="(item, index) in case_data" :key="index" :dialogue="item")
    footer.footer
      input(v-model="content" @keyup.enter="message")
      button.btn_default(@click="message") 发送
</template>

<script>
  import {mapState, mapGetters, mapMutations} from 'vuex'
  import headText from '@/components/head-text'
  import information from '@/components/information'
  export default {
    name: "roomInner",
    data() {
      return {
        content: '',
        case_data: [],
      }
    },
    // sockets: {
      // //不能改,j建立连接自动调用connect
      // connect (msg) {
      //   //与socket.io连接后回调
      // },
      // //进入
      // entry (msg){
      //   this.addNew(msg)
      // },
      // //消息
      // message (msg) {
      //   this.addNew(msg)
      // },
      // //退出
      // quit (msg) {
      //   this.addNew(msg)
      // },
      // //在线
      // onLine(msg){
      //   this.setUsers({
      //     name: this.roomName,
      //     users: msg.number
      //   })
      // },
    // },
    computed: {
      ...mapState(['roomName']),
      ...mapGetters(['room']),
    },
    methods: {
      ...mapMutations(['setUsers']),
      sockets({type, data}){
        console.log(type, data)
        if(type === 'message'){
          this.addNew(data)
        } else if(type === 'online'){
          this.setUsers({
            name: this.roomName,
            users: data.number
          })
        }
      },
      addNew(msg){
        this.case_data.push(msg);
        this.$nextTick(() => {
          const refs = this.$refs;
          refs.section.scrollTop = refs.indoor.scrollHeight;
        })
      },
      message (type) {
        if(this.content === '' && typeof userName == 'object') return;
        if(typeof type === 'object') type = 'message'
        this.$socket.emit('push' ,{
          type,
          data: {
            content: this.content,
          }
        })
        this.content = ''
      }
    },
    created() {
      this.$socket.on('pull', this.sockets)
      this.message('entry');
    },
    mounted() {

    },
    beforeDestroy(){
      this.message('quit');
    },
    components: {
      information,
      headText
    }
  }
</script>

